<template>

  <el-select ref="ElSelectTree" v-model="selectedInfo.id" :placeholder="placeholder" style="width: 100%;">
    <el-option :value="selectedInfo.id" :label="selectedInfo.name" style="height:100%;overflow: hidden;">
      <el-tree
        ref="elTree"
        style="margin:0"
        class="common-el-tree"
        :data="data"
        :props="props"
        node-key="id"
        @node-click="handleNodeClick" />
    </el-option>
  </el-select>
</template>
<script>

export default {
  name: 'FileItem',
  props: {
    data: { type: Array, default() { return [] } },
    value: { type: String, default() { return null } },
    props: { type: Object, default() { return { children: 'children', label: 'label' } } },
    placeholder: { type: [String], default: '请选择' }
  },
  data() {
    return {
      list: [],
      selectedInfo: {},
      deconstructionDatas: [],
      fullPathName: [],
      fullPathId: []
    }
  },
  watch: {
    data: function(val) {
      this.initOption()
    },
    value: {
      deep: true,
      handler: function(val) {
        this.selectedInfo.id = val
        this.initOption()
      }
    },
    'selectedInfo.id': function(val) {
      this.$emit('input', val)
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initOption()
    })
  },
  methods: {
    initOption() {
      if (this.value) {
        var datas = this.filterData(this.data)
        if (datas) {
          this.selectedInfo = {
            id: datas.id,
            name: datas.name
          }
        }
      } else {
        this.selectedInfo = {}
      }
    },
    buildParent(array, value) {

    },
    filterData(data) {
      if (data) {
        this.deconstructionDatas = []
        this.deconstruction(data)
        var datas = this.deconstructionDatas.find((item) => {
          return item.id === this.value
        })
        return datas
      }
    },
    deconstruction(data) {
      data.forEach(item => {
        this.deconstructionDatas.push({
          id: item.id,
          name: item[this.props.label]
        })
        if (item[this.props.children]) {
          this.deconstruction(item[this.props.children])
        }
      })
    },
    handleNodeClick(data, node) {
      var fullPathId = null
      var fullPathName = null
      if (node.parent.parent === null) {
        fullPathName = data[this.props.label]
        fullPathId = data.id
      } else {
        this.fullPathId = []
        this.fullPathName = []
        this.fullPathId.push(data.id)
        this.fullPathName.push(data[this.props.label])
        this.getParentIds(node)
        fullPathName = this.fullPathName.reverse().join('/')
        fullPathId = this.fullPathId.reverse().join(',')
      }
      this.selectedInfo = {
        id: data.id,
        name: data[this.props.label],
        fullPathName: fullPathName,
        fullPathId: fullPathId
      }
      this.$emit('selected', this.selectedInfo)
      if (data.children) {
        console.log(node)
      } else {
        this.$refs.ElSelectTree.blur()
      }
    },
    getParentIds(node) {
      var parentData = node.parent.data
      if (node.parent.parent === null) {
        if (parentData.id) {
          this.fullPathId.push(parentData.id)
          this.fullPathName.push(parentData[this.props.label])
        }
      } else {
        this.fullPathId.push(parentData.id)
        this.fullPathName.push(parentData[this.props.label])
        this.getParentIds(node.parent)
      }
    }

  }
}
</script>

<style lang="scss" scoped>

</style>
